<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div style="width: 100%;">
    <!--公司详细信息-->
    <el-form ref="compinfo" :model="compinfo" status-icon label-position="left"
             label-width="124px" style="width: 100%; display: flex;padding-bottom: 30px">
      <div style="flex: 1;margin-left: 15px">
        <el-form-item label="中征码：" style="margin-bottom: 0">
          <span>{{ compinfo.loanCardNo }}</span>
        </el-form-item>
        <el-form-item label="公司名称：" style="margin-bottom: 0">
          <span>{{ compinfo.companyName }}</span>
        </el-form-item>
        <el-form-item label="统一信用代码：" style="margin-bottom: 0">
          <span>{{ compinfo.unicode }}</span>
        </el-form-item>
      </div>
      <div style="flex: 1">
        <el-form-item label="法人姓名：" style="margin-bottom: 0">
          <span>{{ compinfo.legalName }}</span>
        </el-form-item>
        <el-form-item label="法人手机号：" style="margin-bottom: 0">
          <span>{{ compinfo.legalMobile }}</span>
        </el-form-item>
        <el-form-item label="法人证件号码：" style="margin-bottom: 0">
          <span>{{ compinfo.legalID }}</span>
        </el-form-item>
      </div>
    </el-form>

    <div style="width: 100%;display:flex;">
      <el-form ref="sigingInfo" :rules="sigingInfoRules" :model="sigingInfo" status-icon label-position="right"
               label-width="150px" style="width: 55%;">
        <el-form-item label="签约银行：" prop="bankCode">
          <el-select v-model="sigingInfo.bankCode" placeholder="请选择" style="width:80%" @change="bankNameChange">
            <el-option value="0000" label="富民银行">富民银行</el-option>
            <el-option value="0001" label="网商银行">网商银行</el-option>
            <el-option value="0002" label="振兴银行">振兴银行</el-option>
          </el-select>
          <el-alert
            v-if="sigingInfo.bankCode == '0001' || sigingInfo.bankCode == '0002'"
            style="background-color: #fff;padding: 0;width: 50%"
            title="即将上线"
            type="error"
            :closable="false">
          </el-alert>
        </el-form-item>
        <el-form-item label="协议签署页扫描件：" prop="agreement" v-if="sigingInfo.bankCode != '0002'">
          <el-upload
            style="width: 70%"
            class="upload-demo"
            ref="upload"
            action="string"
            :before-upload="beforeUploadFile"
            :http-request="dosigningUpload"
            :file-list="fileList"
            :limit="1"
            name="agreement"
            list-type="picture"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PBG,"
            :auto-upload="false">
            <el-button size="small" type="primary" style="width: 100%" :disabled="sigingInfo.bankCode == '0001'">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">图片文件（jpg、png、jpeg），5M以内</div>
          </el-upload>
          <!--<el-upload
			style="width: 70%"
			action="string"
			list-type="picture-card"
			:limit="1"
			:before-upload="beforeUploadFile"
			:http-request="dosigningUpload"
			:file-list="fileList"
			name="agreement"
			:on-preview="handlePictureCardPreview"
			:on-remove="handleRemove">
			<i class="el-icon-upload"></i>
			<el-dialog :visible.sync="dialogVisible">
			  <img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
		  </el-upload>-->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dosigningUpload" style="width: 30%" :disabled="sigingInfo.bankCode == '0001' || sigingInfo.bankCode == '0002'">{{ accountStatus }}</el-button>
        </el-form-item>
        <div style="text-align: center;padding: 20px 0 20px 0;" v-if="sigingInfo.bankCode == '0000'">
          <el-button type="success" style="width: 35%" @click="agreementDownload" plain>
            协议下载
          </el-button>
        </div>
      </el-form>

      <!--右侧银行状态-->
      <el-form style="width: 45%;">
        <div class="bacnk_fon" v-for="(item, index) in bankCodeList">
          <!--<div class="bacnk_fon" v-for="(item, index) in unicodeList">-->
          <!--银行名称-->
          <div class="font-cs">
            <a>{{ item.label }}</a>
            <!--<a>{{ item.bankCode | bankCodeFilter }}</a>-->
            <div style="padding: 25px 0 20px 0;" v-if="item.bankCodeListbol && item.bol">
              <el-button type="success" style="text-align: center" @click="discount">查看网银贴现</el-button>
            </div>
          </div>

          <!--银行签约状态-->
          <div class="button_cs" style="padding-top: 20px" v-for="items in unicodeList" v-if="!item.bankCodeListbol">
            <div class="siging-font" v-if="item.value == items.bankCode">
              <span>{{ items.status | statusFilter }}</span>
            </div>
            <div class="siging-font" v-else>
              <span>未签约</span>
            </div>
          </div>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'bank',
  components: {Pagination},
  filters: {},
  data() {
    return {
      bankCodeList: [
        {
          value: '0000',
          label: '富民银行',
          bol: false,           //判断显示未签约
          sigingfont: '未签约',
          chkResult: '',
          billRate: '',
          realMoneyl: '',
          interest: '',
          bankCodeListbol: false      //判断显示已签约
        },
        {
          value: '0001',
          label: '网商银行',
          bol: false,
          sigingfont: '未签约',
          chkResult: '',
          billRate: '',
          realMoneyl: '',
          interest: '',
          bankCodeListbol: false
        },
        {
          value: '0002',
          label: '振兴银行',
          bol: false,
          sigingfont: '未签约',
          chkResult: '',
          billRate: '',
          realMoneyl: '',
          interest: '',
          bankCodeListbol: false
        },
      ],
      list: [],
      compinfoList: [],                //获取公司信息列表
      unicodeList: [],                 //获取签约结果列表
      fileList: [],                    //上传文件
      compinfo: {                      //公司列表表单
        unicode: undefined,
        companyName: undefined,
        loanCardNo: undefined,
        legalName: undefined,
        legalID: undefined,
        legalMobile: undefined
      },
      sigingInfo: {
        bankCode: undefined,
      },
      sigingInfoRules: {
        bankCode: [{required: true, message: '签约银行不允许为空', trigger: 'blur'}],
      },
      accountStatus: '签约',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**获取公司信息列表*/
    getList() {
      doPost('company.html?op=list', {}).then(response => {
        this.compinfoList = response.rows
        for (var item of this.compinfoList) {
          this.compinfo = item
        }
        this.compinfoList.map((item,index) => {
          if (item.unicode != undefined) {
            this.compinfUnicode = item.unicode
            return
          }
        })
        this.getUnigo(this.compinfUnicode)
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: response.message
        })
      })
    },
    getUnigo(unicode) {
      doGet('company.html?op=signresult', { unicode: unicode }).then(response => {
        this.unicodeList = response.rows
      }).catch(() => {
        this.unicodeList = []
      })
    },
    /**上传图片*/
    beforeUploadFile(file) {
      this.file = file;
      let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      let size = file.size / 1024 / 1024 <= 5
      if (extension !== 'jpg' && extension !== 'png' && extension !== 'jpeg' && extension !== 'JPG' && extension !== 'PNG') {
        this.$notify.warning({
          title: '警告',
          message: `只能上传png（即后缀是.jpg或.png）的文件`
        })
        return false
      }
      if (!size) {
        this.$message.error('请上传体积小于5MB的文件')
      }
    },
    dosigningUpload(param) {
      this.$refs['sigingInfo'].validate(valid => {
        if (valid) {
          const fd = new FormData()
          fd.append('agreement', param.file)    // 上传文件
          fd.append('bankCode', this.sigingInfo.bankCode)
          if (this.uicod == undefined && this.codes == undefined) {
            fd.append('unicode', this.compinfUnicode)   //首页点击获取
          } else if (this.uicod == undefined) {
            fd.append('unicode', this.codes)            //从本页点击左侧菜单面获取
          } else if (this.codes == undefined) {
            fd.append('unicode', this.uicod)            //从企业信息页面获取
          }
          doPost(`company.html?op=${this.accountStatus == '签约' ? 'sign' : 'resign'}`, fd).then(response => {
            this.$notify.success({
              title: '成功',
              message: this.accountStatus == '签约' ? '银行签约成功' : '重新签约银行成功'
            })
          }).catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
        }
      })
    },
    /**切换按钮*/
    bankNameChange() {
      for (var item of this.unicodeList) {
        if (this.sigingInfo.bankCode == item.bankCode && item.status == '2') {
          this.accountStatus = '重新签约'
        }
      }
    },
    /**协议下载*/
    agreementDownload() {
      var url ='http://www.piaojupingtai.com/'
      url += 'downLoad.html?bankCode=' + this.sigingInfo.bankCode + '&op=download'
      window.open(url)
    },
  }
}
</script>
<style lang="scss" scoped>
  .bacnk_fon {
    display: flex;
    width: 100%;
    height: 120px;
    margin-bottom: 16px;
    box-shadow: 0 0 24px 0 #eee;
    .font-cs {
      flex: 1;
      font-size: 18px;
      font-weight:bold;
      padding: 20px 0 20px 20px;
    }
    .button_cs {
      flex: 1;
      display: inline;
      text-align: right;
      margin: 0;
      padding: 0 20px 0 10px;
      .siging-font {
        width: 60%;
        height:30px;
        border: 1px solid #4E95FA;
        line-height: 25px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        border-radius: 3px;
      }
    }
  }
</style>
